<template>
  <div class="producelist">
    <div class="produce" v-for="(produce) in produceLIst" :key="produce.id" @click="goDetail(produce.id)">
      <img :src="produce.list_pic_url" alt="">
      <div class="producetext">
        <p>{{produce.name}}</p>
        <span>平价产品,优质好货</span>
        <div class="maney">
          <span>￥</span>
          <span>{{produce.retail_price}}</span>
          <span>起</span>
          <span>￥{{produce.oldprice}}</span>
        </div>
      </div>
    </div>
    <div class="moreproduce">
      ----更多新品，请下载有品APP查看----
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'ProduceList',
   computed:{
    ...mapGetters('home',['categoryList']),
    produceLIst(){
      let b= this.categoryList[0].goodsList ||[]
      let c= this.categoryList[1].goodsList ||[]
      let d= this.categoryList[2].goodsList ||[]
      let a = b.concat(c);
      let e = a.concat(d);
      e.map((item)=>{
        item.oldprice = item.retail_price+20
      })
      return e
    } 
  },
  mounted() {
    this.$store.dispatch('home/getBannerList')
  },
  methods: {
    goDetail(id){
      this.$router.push({
        path:'/detail',
        query:{
          id:id
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.producelist{
  background-color: rgb(241, 241, 241);
  width: 100%;
  // height: 800px;
  padding-left:  20px;
  padding-top: 34px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 300px;
  // overflow:hidden
  // display: flex;
  .produce{

    // float: left;
    // flex: auto;
    // margin-bottom: ;
    margin-right: 19px;
    width: 48%;
    height: 700px;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 7px 7px 5px #dddddd;
    margin-bottom: 20px;
    img{
      width: 100%;
    }
    .producetext{
      width: 100%;
      height: 184px;
      // background-color: hotpink;
      border-radius: 0 0 20px 20px;
      box-sizing: border-box;
      padding-left: 10px;
      p{
        margin: 0;
        font-size: 34px;
        margin-bottom: 10px;
      }
      > span{
        font-size: 30px;
        margin-bottom: 24px;
        display: block;
        color: rgb(182, 182, 182);
      }
      .maney{
        :nth-child(1){
          color: orange;
        }
        :nth-child(2){
          font-size: 40px;
          color: orange;
        }
        :nth-child(3){
          color: orange;
        }
        :nth-child(4){
          text-decoration: line-through;
          color: rgb(182, 182, 182);
        }
      }
    }
  }
  .moreproduce{
    color: rgb(146, 146, 146);
    font-size: 35px;
    margin: 0 auto;
    margin-top: 100px;
  }
}
</style>
